
<template>
  <a-modal
    :title="title"
    :visible="true"
    width="536px"
    @cancel="onCancel"
    @ok="onOk"
    :cancelText="$t('languages.Apps.Cancel')"
    :okText="$t('languages.Save')"
    :maskClosable="false"
  >
    <div class="row">
      <a-radio
        :checked="isFixed"
        @click="setValueType('')"
      >选择组织架构</a-radio>
      <staff-selector
        v-model="staff"
        :options="staffSelectorOpts"
        :disabled="!isFixed"
        :keepDeptIds="keepDeptIds"
      ></staff-selector>
    </div>

    <template v-if="isOrgRoot">
      <div class="row">
        <a-radio
          :checked="isRef"
          @click="setValueType('ref')"
        >表单字段</a-radio>

        <a-select
          v-model="refControlKey"
          :disabled="!isRef"
        >
          <a-select-option
            v-for="c of deptControls"
            :key="c.key"
            :value="c.key"
          >{{ c.options.name }}</a-select-option>
        </a-select>
      </div>

      <div class="row">
        <a-radio
          :checked="isCreator"
          @click="setValueType('originatorDept')"
        >创建人部门</a-radio>
      </div>
    </template>

    <template v-else>
      <div class="row">
        <a-radio :checked="isCreator" @click="setValueType(null)">创建人相关</a-radio>

        <a-select 
          :value="selectValue"
          @change="e => setValueType(e)"
          :disabled="!isCreator"
        >
          <a-select-option v-if="selectUser" value="originator">创建人</a-select-option>
          <a-select-option v-if="selectOrg" value="originatorDept">创建人部门</a-select-option>
        </a-select>
      </div>
    </template>
  </a-modal>
</template>


<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Emit,
  Watch,
  Inject
} from "vue-property-decorator";

import { Modal } from "@h3/antd-vue";

import { schema, renderer } from "@cloudpivot/form";

import rendererComponents from '@cloudpivot/form/src/renderer/components/pc';

import * as dataitemStore from "@cloudpivot/form/src/stores/data-items.store-helper";

import { formApi } from "@cloudpivot/api";

@Component({
  name: "user-select-value-setting",
  components: {
    AModal: Modal,
    StaffSelector: rendererComponents.StaffSelector
  }
})
export default class UserSelectValueSetting extends Vue {
  @Prop({
    type: Object
  })
  modalData!: any;

  @Prop({type:Object})
  modalOptions!:any

  @Prop()
  dataItem!: any;

  @Prop()
  getFormControls!: () => { [key: string]: schema.FormControl };

  selectOrg = false;

  selectUser = false;

  staffSelectorOpts = {
    key: "orgRoot",
    selectOrg: false,
    selectUser: false,
    mulpitle: false,
    showModel: true,
    showSelect: true,
    placeholder: "点击选择",
    appManagerFilter: true // 传强同学 说要求在设计时加的 filterType 传 admin
  };

  opts: schema.StaffSelectorOptions = {} as any;

  valueType = "";

  staff: any[] = [];

  refControlKey = "";

  get title() {
    const data = this.modalData;
    if (!data || !data.label) {
      return "";
    }
    return data.label;
  }

  get isCreator() {
    const type = this.valueType;
    return (
      type === schema.StaffSelectorValueType.Originator ||
      type === schema.StaffSelectorValueType.OriginatorDept
    );
  }

  get isFixed() {
    return this.valueType === schema.StaffSelectorValueType.None;
  }

  get isRef() {
    return this.valueType === schema.StaffSelectorValueType.Ref;
  }

  /**
   * 组织根节点
   */
  get isOrgRoot() {
    return this.modalOptions.modalType === 'UserSelectOrgValueSetting';
  }

  get deptControls() {
    if (!this.getFormControls) {
      return [];
    }

    const controls = this.getFormControls();

    if (!controls) {
      return [];
    }
    let isChild = !!this.dataItem.parentCode
    let depts:any[] = []
    for(let ctrlKey of Object.keys(controls)) {
      let ctrl:any = controls[ctrlKey]
      if((ctrl.type === schema.FormControlType.StaffSelector ||
           ctrl.type === schema.FormControlType.StaffMultiSelector ||
           ctrl.type === schema.FormControlType.DepartmentSelector ||
           ctrl.type === schema.FormControlType.DepartmentMultiSelector) &&
           ctrl.options.deptVisible === schema.StaffSelectorSelectType.Org &&
           ctrl.key !== this.dataItem.code) {
             depts.push(ctrl)
      } else if (ctrl.type === schema.FormControlType.Tabs) {
        console.log(ctrl)
        var loop = [ctrl]
        while(loop.length) {
          let _tabs = loop.shift()
          for(let _panel of _tabs.panels) {
            for(let _ctrlKey of Object.keys(_panel.controls)) {
              let _ctrl = _panel.controls[_ctrlKey]
              if ((_ctrl.type === schema.FormControlType.StaffSelector ||
                    _ctrl.type === schema.FormControlType.StaffMultiSelector ||
                    _ctrl.type === schema.FormControlType.DepartmentSelector ||
                    _ctrl.type === schema.FormControlType.DepartmentMultiSelector) &&
                    _ctrl.options.deptVisible === schema.StaffSelectorSelectType.Org &&
                    _ctrl.key !== this.dataItem.code) {
                  depts.push(_ctrl)
                }else if (_ctrl.type === schema.FormControlType.Tabs) {
                  loop.push(_ctrl)
                } else if (isChild && _ctrl.type === schema.FormControlType.Sheet && _ctrl.key === this.dataItem.parentCode) {
                  (_ctrl as any).columns.forEach((subItem) => {
                    if ((subItem.type === schema.FormControlType.StaffSelector ||
                    subItem.type === schema.FormControlType.StaffMultiSelector ||
                    subItem.type === schema.FormControlType.DepartmentSelector ||
                    subItem.type === schema.FormControlType.DepartmentMultiSelector) &&
                    subItem.options.deptVisible === schema.StaffSelectorSelectType.Org &&
                    subItem.key !== this.dataItem.code) {
                      depts.push({
                        ...subItem,
                        key:`${_ctrl.key}.${subItem.key}`
                      })
                    }
                  })
                }
            }
          }
        }
      } if (isChild && ctrl.type === schema.FormControlType.Sheet && ctrl.key === this.dataItem.parentCode) {
        (ctrl as any).columns.forEach((subItem) => {
          if ((subItem.type === schema.FormControlType.StaffSelector ||
           subItem.type === schema.FormControlType.StaffMultiSelector ||
           subItem.type === schema.FormControlType.DepartmentSelector ||
           subItem.type === schema.FormControlType.DepartmentMultiSelector) &&
           subItem.options.deptVisible === schema.StaffSelectorSelectType.Org &&
           subItem.key !== this.dataItem.code) {
            depts.push({
              ...subItem,
              key:`${ctrl.key}.${subItem.key}`
            })
          }
        })
      }
    }
    // const depts = Object.keys(controls)
    //   .map(k => controls[k])
    //   .filter(
    //     c =>{
    //       if ((c.type === schema.FormControlType.StaffSelector ||
    //         c.type === schema.FormControlType.StaffMultiSelector ||
    //         c.type === schema.FormControlType.DepartmentSelector ||
    //         c.type === schema.FormControlType.DepartmentMultiSelector) &&
    //         c.options.deptVisible === schema.StaffSelectorSelectType.Org &&
    //         c.key !== this.dataItem.code) {
    //           return true
    //       }
    //     });

    return depts;
  }

  keepDeptIds:string[] = [];

  @Watch("modalData", {
    immediate: true
  })
  onModalDataChange(modalData: any) {
    if (!modalData.data) {
      this.opts = {} as any;
      this.staff = [];
      return;
    }

    this.opts = modalData.data;
    this.valueType = this.isOrgRoot
      ? this.opts.orgRootValueType
      : this.opts.defaultValueType;

    this.selectOrg = false;
    this.selectUser = false;

    let mulpitle = false;

    if (this.isOrgRoot) {
      mulpitle = true;
      this.selectOrg = true;
      this.selectUser = false;
      this.valueType = this.opts.orgRootValueType;

      if (
        this.valueType === schema.StaffSelectorValueType.None &&
        Array.isArray(this.opts.orgRoot)
      ) {
        this.staff = this.opts.orgRoot;
      } else {
        this.staff = [];

        if (
          this.valueType === schema.StaffSelectorValueType.Ref &&
          this.opts.orgRoot &&
          typeof this.opts.orgRoot === "string"
        ) {
          let refControlKey = this.opts.orgRoot;
          if (refControlKey) {
            const keys = this.deptControls.map(c => c.key);
            refControlKey = refControlKey.substr(1, refControlKey.length - 2);
            if (keys.indexOf(refControlKey) > -1) {
              this.refControlKey = refControlKey;
            }
          }
        }
      }
    } else {
      mulpitle = this.opts.multi;

      this.valueType = this.opts.defaultValueType;

      this.staff =
        this.valueType === schema.StaffSelectorValueType.None
          ? this.opts.defaultValue || []
          : [];

      switch (this.opts.deptVisible) {
        case schema.StaffSelectorSelectType.All:
          this.selectOrg = true;
          this.selectUser = true;
          break;
        case schema.StaffSelectorSelectType.User:
          this.selectOrg = false;
          this.selectUser = true;
          break;
        case schema.StaffSelectorSelectType.Org:
          this.selectOrg = true;
          this.selectUser = false;
          break;
      }
    }

    this.staffSelectorOpts = Object.assign(this.staffSelectorOpts, {
      selectOrg: this.selectOrg,
      selectUser: this.selectUser,
      mulpitle
    });
  }

  get selectValue() {
    if (this.isCreator) {
      return this.valueType;
    }
    return "";
  }

  setValueType(type: string) {
    if (type === null) {
      this.valueType =
        this.opts.deptVisible === schema.StaffSelectorSelectType.Org
          ? schema.StaffSelectorValueType.OriginatorDept
          : schema.StaffSelectorValueType.Originator;
    } else {
      this.valueType = type;
    }
  }

  onOk() {
    let value: any;

    if (this.isOrgRoot) {
      if (this.valueType === schema.StaffSelectorValueType.Ref) {
        value = this.refControlKey ? `{${this.refControlKey}}` : null;
      } else {
        value = this.staff.length === 0 ? null : this.staff;
      }
    } else {
      value = this.staff.length === 0 ? null : this.staff;
    }

    const data = {
      type: this.valueType,
      value
    };
    this.$emit("backData", data);
  }

  onCancel() {
    this.$emit("closeModal");
  }

  /**
   * @desc 根据接口判断选人控件是否可编辑 by John
   * */ 
  async getOperateAble(){
    const { staff } = this;
    const targetIds:string = staff.map((staff:any) => {
      return staff.id
    }).join(',');

    const params:any = {targetIds, sourceType: 'DEPT'};

    const res:any = await formApi.getStaffOperateAble(params);
    const { data } = res;

    this.keepDeptIds = data.map((i:any) => {
      if(!i.op) { return i.targetId; }
    }).filter((i:any) => !!i);
  }

  mounted(){
    if (this.staff.length <= 0) return;
    this.getOperateAble();
  }
}
</script>

<style lang="less" scoped>
.row {
  display: flex;
  // align-items: center;

  &:not(:last-child) {
    margin-bottom: 24px;
  }

  & > div:last-child {
    flex-grow: 1;
  }
}

/deep/.ant-radio-wrapper {
  width: 116px;
  margin-top: 0.4em;
}

/deep/.h3-organization {
  display: inline-block;
}
</style>


